.health-container {
    height: calc(100vh - 50px);
    background-image: url("@/assets/images/health-bg.png");
    background-size: cover;
    min-width: 1500px;
    overflow: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;

    .bg-left {
        background-image: url("@/assets/images/health-left.png");
        background-size: 100% 100%;
        height: 100%;
        width: vw(120);
    }

    $www : vw(240);

    .center-view {
        width: calc(100% - $www);
        display: flex;
        flex-direction: column;

        .title-view {
            margin: 0 auto;
            background-image: url("@/assets/images/device-title-bg.png");
            background-size: vw(872) vh(130);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: vw(872);
            height: vh(130);

            .device-title {
                width: vw(288);
                height: vh(43);
                margin-top: vh(10);
                background-image: url("@/assets/images/device-title.png");
                background-size: vw(288) vh(43);
            }
        }

        .banner-view {
            flex: 1;

            .swiper {
                margin-top: -20px;
                width: vh(1050)
            }

            .swiper-slide {
                background-image: url("@/assets/images/card-bg.png");
                background-size: 100% 100%;
                position: relative;
                height: vh(380);
                width: vh(525) !important;
            }

            .swiper-slide img {
                display: block;
                width: 10%;
            }
        }

        .button-view {
            width: 100%;
            display: flex;
            height: vh(220);
            padding: 0 20px;
            justify-content: space-around;

            div:first-child {
                margin-top: vh(-40);

                .text {
                    width: vw(135);
                }
            }

            div:nth-child(2) {
                .text {
                    width: vw(120);
                }
            }

            div:nth-child(3) {
                .text {
                    width: vw(165);
                }
            }

            div:nth-child(4) {
                .text {
                    width: vw(135);
                }
            }

            div:nth-child(5) {
                .text {
                    width: vw(135);
                }
            }

            div:nth-child(6) {
                .text {
                    width: vw(135);
                }
            }

            div:last-child {
                margin-top: vh(-40);

                .text {
                    width: vw(135);
                }
            }
        }

    }

    .bg-right {
        background-image: url("@/assets/images/health-right.png");
        background-size: 100% 100%;
        height: 100%;
        width: vw(120);
    }

    .slide-header {
        width: 100%;
        margin-top: vh(35);
        display: flex;
        justify-content: center;
        align-items: center;

        .header-left {
            width: vw(105) !important;
            height: vh(25);
        }

        .title {
            margin-left: vh(5);
            margin-right: vh(5);
            font-size: vh(28);
            min-width: vh(120);
            text-align: center;
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 vh(10) #ed9018;
        }

        .header-right {
            width: vw(105) !important;
            height: vh(25);
        }
    }

    .slide-content {
        margin-top: vh(30);
        margin-left: vh(52);
        margin-right: vh(52);
        color: #fff;
        font-size: vh(15);
        height: vh(107);
        overflow: auto;
    }

    .slide-foot {
        position: absolute;
        left: vh(33);
        bottom: vh(59);
        display: flex;

        img {
            flex-shrink: 0;
            width: vh(62) !important;
            height: vh(62);
            margin-right: vh(20);
        }

        .device {
            color: #fff;
            font-size: vh(17);
            margin-top: vh(4);
            margin-bottom: vh(5);
            margin-left: vh(2);
        }

        .count {
            color: #fff;
            font-size: vh(27);
        }

        .unit {
            color: #fff;
            font-size: vh(17);
        }
    }

    .el-switch {
        position: absolute;
        right: vh(37);
        bottom: vh(75);
        width: vh(128);
        height: vh(34);
    }

    :deep(.el-switch__core) {
        width: vh(128) !important;
        height: vh(32);
        border: 1px solid #a1740d;
    }
    :deep(.el-switch__action) {
        width: vh(50);
        height: vh(28);
        border-radius: vh(14);
        background-color: #a1740d;
        left:0;
    }
    $w:vh(50);
    :deep(.el-switch.is-checked .el-switch__core .el-switch__action){
        left: calc(100% - $w);
        background-color: #1ee8a8;
    }
}

.icon-img {
    width: vh(120);
    height: vh(120);
}

.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

// 主要部分, 必须存在, 并且必须设定尺寸

::-webkit-scrollbar {

    width: 5px;

    height: 10px;

}

// 滚动条两端的按钮

::-webkit-scrollbar-button {

    background-color: #041741;

    width: 10px;

    height: 0px;

}

// 滚动条的滑块部分

::-webkit-scrollbar-thumb {

    background: #2d3748;

    border: 0px none #ffffff;

    border-radius: 50px;

}

// 滚动条滑块的hover样式

::-webkit-scrollbar-thumb:hover {

    background: #2b6cb0;

}

// 滚动条滑块的激活样式

::-webkit-scrollbar-thumb:active {

    background: #000000;

}

// 滚动条的外层轨道

::-webkit-scrollbar-track {

    background: #1a202c;

    border: 0px none #ffffff;

    border-radius: 50px;

}

::-webkit-scrollbar-track:hover {

    background: #666666;

}

::-webkit-scrollbar-track:active {

    background: #333333;

}

// 滚动条的外层轨道-可见部分

::-webkit-scrollbar-track-piece {

    background: #041741;

}

// 滚动条边角

::-webkit-scrollbar-corner {

    background: transparent;

}

// 滚动条右下角拖动块

::-webkit-resizer {

    background-color: transparent;

}